<template>
  <view class="test-check">
    <view v-if="[2, 3, 6].includes(info.step)" class="top-content" :style="info.step === 6 ? 'margin-top: 100rpx;' : ''">
      <template v-if="info.step && info.step === 2">
        <image v-if="info.image && info.step" class="step-image" :class="`step-${info.imageNum}`" :src="`/static/img/${info.image}`" mode="aspectFit" />
        <view v-if="info.imageDesc" class="image-desc">{{ info.imageDesc }}</view>
      </template>
      <template v-if="info.step && info.step === 3">
        <image v-if="info && info.step" class="step-image" :class="`step-${info.imageNum}`" :src="`/static/img/${info.image}`" mode="aspectFit" />
        <view v-if="info.imageDesc" class="image-desc">{{ info.imageDesc }}</view>
      </template>
      <template v-else-if="info.step && info.step === 6">
        <countDown ref="down" :times='times' @endTime='endTime' @pause='pauseNum'></countDown>
        <image class="countdown" src="/static/img/step-countdown.png" />
        <view v-if="time === -1" class="reading-data small">正在检测加样，请确认完成加样操作......</view>
        <view v-else class="reading-data">数据读取中</view>
        <view class="device-number">电子检测盒编号：{{ deviceNumber }}</view>
      </template>
    </view>
    <view v-else-if="info.step === 1" class="content multi">
      <image class="content-bg" src="/static/img/content-bg.png" />
      <view class="container">
        <image class="down-arrow" src="/static/img/down.png" />
        <view v-for="item in info.steps" :key="item.name" class="step-item">
          <view v-if="item.imageDesc" class="image-desc">{{ item.imageDesc }}</view>
          <template v-if="item.content && item.content.length">
            <view class="step-name">{{ item.name }}</view>
            <view class="step-desc">
              <view v-for="(v, index) in item.content" :key="index" class="desc">{{ v }}</view>
            </view>
          </template>
          <image v-if="item.image && item.step" class="step-image" :class="`step-${item.imageNum}`" :src="`/static/img/${item.image}`" mode="aspectFit" />
        </view>
        <div v-if="info.step === 1" class="scan-btn-wrap">
          <button class="scan-btn" @click="onNext">{{ info.operateName }}</button>
        </div>
      </view>
    </view>
    <view v-else-if="info.step !== 3" class="content" :class="[2, 6, 7].includes(info.step) ? 'short' : ''">
      <image class="content-bg" src="/static/img/content-bg.png" />
      <view class="container">
        <view v-if="![2, 3, 6, 7].includes(info.step)" class="image-wrap">
          <image v-if="[5].includes(info.step)" class="arrow-left" src="/static/img/arrow-left.png" @click="onBack" />
          <image v-if="[4].includes(info.step)" class="arrow-right" src="/static/img/arrow-right.png" @click="onNext" />
          <image v-if="info.image && info.step" class="step-image" :class="`step-${info.imageNum}`" :src="`/static/img/${info.image}`" mode="aspectFit" />
          <view v-if="info.imageDesc" class="image-desc">{{ info.imageDesc }}</view>
        </view>
        <view v-else-if="info.step && info.step === 7" class="result-wrap">
          <template v-if="info.result === 0">
            <image class="result-image" src="/static/img/step-result-normal.png" />
            <view class="result-text">无反应</view>
          </template>
          <template v-else-if="info.result === 1">
            <image class="result-image" src="/static/img/step-result-responsive.png" />
            <view class="result-text">有反应</view>
          </template>
          <template v-else-if="info.result === 2">
            <image class="result-image" src="/static/img/step-result-invalid.png" />
            <view class="result-text">检测无效</view>
          </template>
		  <template v-else-if="info.result === 4">
		    <image class="result-image" src="/static/img/step-result-invalid.png" />
		    <view class="result-text">检测无效</view>
		  </template>
          <view class="device-number">设备编号：{{ deviceNumber }}</view>
        </view>
        <template v-if="info.content && info.content.length">
          <view v-if="info && info.step" class="step-name" :style="info.step === 7 ? 'margin-top: 100rpx;' : ''">{{ info.contentTitle || info.name }}</view>
          <view class="step-desc">
            <view v-for="(item, index) in info.content" :key="index" class="desc">{{ item }}</view>
          </view>
        </template>
      </view>
    </view>
    <button v-if="info.step !== 1 && info.operateName" class="next-btn" :class="info.step === 3 ? 'white' : ''" @click="onNext">{{ info.operateName }}</button>
  <button v-if='info.step==7&&info.result === 0'  class="close_btn" @click="close">关机</button>
  </view>

</template>

<script>
import countDown from '@/components/countDown/countDown.vue'
export default {
  name: 'TestCheck',
  components: {
    countDown
  },
  props: {
    info: {
      type: Object,
      default: () => {}
    },
    deviceNumber: {
      type: String,
      default: ''
    },
    time: {
      type: Number,
      default: 0
    }
  },
  watch: {
    time(val) {
      if (this.info && this.info.step === 6) {
        if (val === -1) {
          this.times = 0
        } else if (val > 0) {
          // 让倒计时组件动起来的测试代码
          this.times = val
          console.log('剩余时间', this.times)
          this.startCounting()
        }
      }
    }
  },
  data() {
    return {
      times: 0,
      currentTime: 100
    }
  },
  onLoad(op) {
  },
  methods: {
    handleScrollBottom() {
      setTimeout(() => {
        uni.pageScrollTo({scrollTop: 99999, duration: 0});
      }, 100)
    },
    onBack() {
      this.$emit('back')
    },
    onNext() {
      this.$emit('next')
    },
	close(){
		this.$emit('Close')
	},
    async startCounting() { //开始事件
      console.log('剩余时间', this.times)
      this.getReset()
      this.$refs.down.start()
    },
    pause() { //暂停
      this.$refs.down.pause()
    },
    pauseNum(e) { //暂停时返回剩余时间
      console.log('剩余时间：', e);
    },
    goOn() { //继续
      this.$refs.down.goOn()
    },
    endTime() { //结束
      console.log('结束');
    },
    getReset() { //重置
      if (this.$refs.down) {
        this.$refs.down.reset()
      }
    },
	
  }
}
</script>

<style lang="scss" scoped>
.test-check {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.close_btn{
	  padding: 0;
	  text-align: center;
	  position: absolute;
	  right: 23rpx;
	  bottom: 350rpx;
	  width: 80rpx;
	  height: 30rpx;
	  font-size: 15rpx;
	  background: #1E64E1;
	  color: #FFFFFF;
  }
.top-content {
 height: 700rpx;
  .step-image {
    margin-top: 96rpx;
  }
}
.content {
  position: relative;
  padding-top: 12rpx;
  box-sizing: border-box;
  height: 100%;
  overflow-y: scroll;
  background-color: #F5F7FB;
  &.multi {
    height: unset;
    .container {
      padding-top: 55rpx;
      margin-bottom: 150rpx;
     .step-item {
       margin-bottom: 90rpx;
       &:last-of-type {
         padding-bottom: 50rpx;
       }
     }
      .step-name {
        text-align: left;
        width: 627rpx;
        margin: 0 auto;
      }
    }
  }
  &.short {
    margin-top: 76rpx;
    .step-name {
      padding-left: 73rpx;
      padding-top: 70rpx;
      font-size: 31rpx;
      text-align: left;
    }
  }

  .container {
    width: 100%;
    height: 100%;
    background-color: #F5F7FB;
    border-top-left-radius: 38rpx;
    border-top-right-radius: 38rpx;
    position: relative;
    .down-arrow {
      width: 28rpx;
      height: 48rpx;
      position: fixed;
      top: 500rpx;
      right: 50rpx;
    }
  }
  .image-wrap {
    height: 650rpx;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 0 100rpx;
  }
  .content-bg {
    position: absolute;
    width: 100%;
    z-index: 0;
    top: 0;
    left: 0;
  }
  .arrow-left {
    width: 24rpx;
    height: 28rpx;
    position: absolute;
    left: 38rpx;
    top: 400rpx;
  }
  .arrow-right {
    width: 24rpx;
    height: 28rpx;
    position: absolute;
    right: 38rpx;
    top: 400rpx;
  }
  .step-name {
    text-align: center;
    font-size: 46rpx;
    font-weight: bold;
    color: #333333;
    line-height: 54rpx;
    margin-bottom: 26rpx;
  }
  .step-desc {
    width: 627rpx;
    margin: 0 auto;
    font-size: 27rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: rgba(51, 51, 51, 0.6);
    padding: 30rpx 0;
  }
  .success-name {
    margin-top: 30rpx;
    font-size: 54rpx;
    font-weight: bold;
    color: #323232;
    line-height: 64rpx;
    text-align: center;
  }
  .success-info {
    margin-top: 38rpx;
    font-size: 36rpx;
    font-weight: normal;
    color: #323232;
    line-height: 60rpx;
    text-align: center;
  }
}
.step-image {
  width: 100%;
  display: block;
  margin: auto;
  &.step-5 {
    width: 438rpx;
    height: 438rpx;
  }
  &.step-6 {
    width: 404rpx;
    height: 441rpx;
  }
}
.image-desc {
  margin-top: 48rpx;
  font-weight: 400;
  text-align: center;
  font-size: 46rpx;
  color: #FFFFFF;
  line-height: 46rpx;
}
.countdown {
  margin: 28px auto;
  width: 350rpx;
  height: 350rpx;
  display: block;
}
.reading-data {
  margin-top: 65rpx;
  font-size: 46rpx;
  font-weight: bold;
  color: #ffffff;
  line-height: 64rpx;
  text-align: center;
  &.small {
    font-weight: 36rpx;
  }
}
.device-number {
  margin-top: 19rpx;
  line-height: 23rpx;
  text-align: center;
  font-size: 23rpx;
  font-weight: 400;
  color: #FFFFFF;
}
.result-wrap {
  padding-top: 92rpx;
  .result-image {
    margin: 0 auto;
    display: block;
    width: 354rpx;
    height: 418rpx;
  }
  .result-text {
    margin-top: 32rpx;
    font-size: 46rpx;
    color: #333333;
    font-weight: bold;
    text-align: center;
  }
  .device-number {
    font-size: 27rpx;
    color: #333333;
    margin-top: 55rpx;
  }
}
.next-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 77rpx;
  margin: 0 auto;
  width: 465rpx;
  height: 85rpx;
  line-height: 85rpx;
  background: #1E64E1;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  border-radius: 15rpx;
  &.white {
    background: #FFFFFF;
    color: #1E64E1;
    bottom: 248rpx;
  }
}
.scan-btn-wrap {
  height: 200rpx;
  .scan-btn {
    margin: 0 auto;
    width: 465rpx;
    height: 85rpx;
    line-height: 85rpx;
    background: #1E64E1;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    border-radius: 15rpx;
  }
}
@media only screen and (max-device-width: 375px) {
  .content {
    .image-wrap{
      height: 480rpx;
    }
  }
  .top-content {
    .step-image {
      margin-top: 36rpx;
    }
  }
  .result-wrap {
    padding-top: 62rpx;
  }
}
</style>
